<template>
    <div>
        <Tabs>
            <TabPane label="测试">
                <Transfer
                        :data="testList"
                        :target-keys="testKey"
                        :render-format="renderFormat"
                        filterable
                        :filter-method="filterMethod"
                        :list-style="{'width': '482px', 'height':'500px'}"
                        @on-change="handleChangeTest"></Transfer>
            </TabPane>
            <TabPane label="正式" v-if="prodList.length > 0">
                <Transfer
                        :data="prodList"
                        :target-keys="prodKey"
                        :render-format="renderFormat"
                        filterable
                        :filter-method="filterMethod"
                        :list-style="{'width': '482px', 'height':'500px'}"
                        @on-change="handleChangeProd"></Transfer>
            </TabPane>
        </Tabs>
        <div v-if="testList.length > 0 || prodList.length > 0" style="text-align: center; margin-top: 16px">
            <Button type="primary" @click="save">save</Button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: this.$route.params.id,
                testList: [],
                prodList: [],
                testKey: [],
                prodKey: []
            }
        },
        created() {
            this.$axios.get('/mdo/api/v1/app/machine/' + this.$route.params.id).then(res => {
                if (res.data !== null) {
                    if (res.data.testMachineList !== null) {
                        this.testList = res.data.testMachineList.map(item => {
                            return {
                                key: item.id,
                                label: item.hostName,
                                description: item.endpointUrl
                            }
                        });
                    }
                    if (res.data.testMachineRelList !== null) {
                        this.testKey = res.data.testMachineRelList.map(item => {
                            return item.machineId
                        });
                    }
                    if (res.data.prodMachineList !== null) {
                        this.prodList = res.data.prodMachineList.map(item => {
                            return {
                                key: item.id,
                                label: item.hostName,
                                description: item.endpointUrl
                            }
                        });
                    }
                    if (res.data.prodMachineRelList !== null) {
                        this.prodKey = res.data.prodMachineRelList.map(item => {
                            return item.machineId
                        });
                    }
                }
            }).catch(e => {
                this.$Message.error(e.response.data);
            });
        },
        methods: {
            renderFormat(item) {
                return item.label + ' - <span style="color: #9ea7b4">' + item.description + '</span>';
            },
            handleChangeTest(keys) {
                this.testKey = keys;
            },
            handleChangeProd(keys) {
                this.prodKey = keys;
            },
            filterMethod(data, query) {
                return data.label.indexOf(query) > -1;
            },
            save(){
                let testRel = this.testKey.map(item => {
                    return {
                        appId: this.id,
                        machineId: item
                    }
                });
                let prodRel = this.prodKey.map(item => {
                    return {
                        appId: this.id,
                        machineId: item
                    }
                });
                this.$axios.put('/mdo/api/v1/app/machine/' + this.$route.params.id, testRel.concat(prodRel)).then(res => {
                    if (res.status === 200) {
                        this.$Message.success('success!');
                    }
                }).catch(e => {
                    this.$Message.error(e.response.data);
                });
            }
        }
    }
</script>